<!--
 * @Author: Redbin
 * @Date: 2022-04-11 11:04:42
 * @LastEditTime: 2022-04-19 15:09:39
 * @LastEditors: Redbin
 * @Description: 
 * @FilePath: /wisdom-website/components/Pagination.vue
 * 以诗的格调出场，才对的起你流光溢彩的眼眸
-->
<template>
  <div
    class="text-[#222] flex items-center justify-center mt-[50px] cursor-pointer scale-75 md:scale-100"
  >
    <span class="mr-5">共{{ total }}条</span>
    <select
      v-if="select"
      v-model="size"
      class="border cursor-pointer rounded-md border-[#D1D1D1] px-5 py-2 hidden md:block md:mr-[60px]"
    >
      <option :value="5">5条/页</option>
      <option :value="10">10条/页</option>
      <option :value="20">20条/页</option>
    </select>
    <div class="flex items-center space-x-5">
      <span
        class="border rounded-md w-10 h-10 text-center leading-10"
        @click="prevPage"
      >
        <img
          class="inline-block rotate-90 mb-1"
          src="../assets/images/icon_arrow_down.png"
        />
      </span>
      <span
        v-if="maxNum > 0"
        :class="{ 'bg-[#028BFF] text-white': 1 === pageNum }"
        class="border order-1 rounded-md w-10 h-10 text-center leading-10"
        @click="handleChange(1)"
        >{{ 1 }}</span
      >
      <template v-for="item in maxNum">
        <span
          v-if="item === pageNum && item != 1 && item != maxNum"
          :key="item"
          :class="{ 'bg-[#028BFF] text-white': item === pageNum }"
          class=" hidden md:block border rounded-md order-2 w-10 h-10 text-center leading-10"
          @click="handleChange(item)"
          >{{ item }}</span
        >
      </template>
      <span
        v-if="maxNum > 3"
        :class="{ '!order-1': maxNum - pageNum < 3 }"
        class="border order-3 rounded-md w-10 h-10 text-center leading-10"
        >···</span
      >
      <span
        v-if="maxNum != 1"
        :class="{ 'bg-[#028BFF] text-white': maxNum === pageNum }"
        class="border order-4 rounded-md w-10 h-10 text-center leading-10"
        @click="handleChange(maxNum)"
        >{{ maxNum }}</span
      >
      <span
        class="border order-5 rounded-md w-10 h-10 text-center leading-10"
        @click="nextPage"
      >
        <img
          class="inline-block -rotate-90 mb-1"
          src="../assets/images/icon_arrow_down.png"
        />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pageNum: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    total: {
      type: Number,
      default: 0,
    },
    select: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      size: this.pageSize,
    }
  },
  computed: {
    maxNum() {
      return Math.ceil(this.total / this.size)
    },
  },
  watch: {
    size(val) {
      this.$emit('sizeChange', val)
    },
  },
  methods: {
    handleChange(num) {
      num > 0 && this.$emit('change', num)
    },
    prevPage() {
      if(this.maxNum){
        this.pageNum !== 1 && this.$emit('change', this.pageNum - 1)
      }
    },
    nextPage() {
      if(this.maxNum){
        this.pageNum !== this.maxNum && this.$emit('change', this.pageNum + 1)
      }
    },
  },
}
</script>

<style></style>
